<!--学籍注册-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-button color-primary width100 right30" @click="xjdr">
        <img src="../../../../assets/assessment/icon-school.png" alt="" />
        <span>学籍导入</span>
      </div>
      <div class="search-button color-green width170 right30" @click="jumpPic">
        <img src="../../../../assets/assessment/icon-green-export.png" alt="" />
        <span>批量上传学员图片</span>
      </div>
      <div class="search-button color-warning width100 right30" @click="deleteInfo">
        <img src="../../../../assets/assessment/icon-delete.png" alt="" />
        <span>批量删除</span>
      </div>
      <div class="search-button mian width100 " @click="msh">
        <img src="../../../../assets/assessment/mian.png" alt="" />
        <span>免审核</span>
      </div>
      <div class="search-button color-primary right0" @click="edit()">
        <img src="../../../../assets/classHours/icon-addBig.png" alt="" />
        <span>新增</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" border style="width: 100%" class="table-data" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="courseName" label="操作" align="center" width="200">
          <span slot-scope="scope" class="small-btn" @click="edit(scope.row.id)">
            <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 编辑
          </span>
        </el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="studentCode" label="学号" align="center"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" align="center" width="200"></el-table-column>
        <el-table-column prop="specialtyClassName" label="专业班次" align="center"></el-table-column>
        <el-table-column prop="beginDate" label="入学年月" align="center"> </el-table-column>
        <el-table-column prop="nation" label="民族" align="center"></el-table-column>
        <el-table-column prop="sourceArea" label="学员来源" align="center"></el-table-column>
        <el-table-column prop="studentProvinces" label="生源省份" align="center" width="200"></el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="importExcel">
        <img src="../../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
    </div>
    <div class="pagination-block">
      <el-pagination prev-text="上一页" next-text="下一页"  v-if="total>50" @current-change="currentPage"
      :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {studentStatusList,studentStatusDelete,studentStatusAudit} from "@/api/student";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm: {
        pageNo:1,
        pageSize:50
      },
      total:1,
      IDS:[],
      studentCode:[],//学号集合
      tableData: [],
    };
  },
  mounted(){
    this.initData()
  },
  methods: {
    async initData(){
      let res = await studentStatusList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    //当前页
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initData()
    },
    //学籍导入
    xjdr(){
      this.$router.push({
        path:'/student/studentStatus/registerList/import',
      })
    },
    //学籍导出
    importExcel(){
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/sysStudentStatus/exportData',
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
        fileDownload(res.data, '学籍信息.xlsx');
      });  
    },
    //批量上传学员图片
    jumpPic(){
      this.$router.push({
        path:'/student/studentStatus/registerList/picture'
      })
    },
    //批量删除
    deleteInfo(){
      if(this.IDS.length>0){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await studentStatusDelete({ ids:this.IDS.join(',')})
          if(res.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }else{
        this.$message({
          message: '请选择要删除的数据！',
          type: 'warning'
        });
      }
    },
    //免审核
    async msh(){
      //0:待审核，1.通过(免审核),2.未提交,3.下发核对
      let params = {
        dataIdList:this.studentCode,
        state:1
      }
      if(this.studentCode.length>0){
        let res = await studentStatusAudit(params)
        if(res.code == 200){
          this.$message.success('审核成功！');
          this.search()
        }
      }else{
        this.$message({
          message: '请选择要免审核的数据！',
          type: 'warning'
        });
      }
    },
    //批量处理id
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.id);
      this.studentCode = e.map(item=>item.studentCode)
    },
    //编辑-编辑
    edit(id){
      this.$router.push({
        path:'/student/studentStatus/registerList/edit',
        query:{
          id:id?id:'',
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  /deep/.el-table__header tr,.el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
 /deep/ .el-table__body tr,.el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.right30{margin-right: 30px;}
.width100{width: 100px;}
.width170{width: 170px;}
.search-container {
  justify-content: flex-start !important;
  position: relative;
}
.right0{
  position: absolute;
  right: 0;
  width: 70px;
}
.color-warning{
    background:#FFEFEF;
    border: 1px solid #FA5339;
    >span{color:#FF3819;}
    >img{width: 17px!important;height:17px!important}
}
.color-green{
    background:#F1FFF8;
    border: 1px solid #02C86C;
    >span{color: #02C86C;}
    >img{width: 17px!important;height:17px!important}
}
.mian{
  background: #FFFFFF;
  border: 1px solid #054CA7;
  color: #054CA7;
}
</style>
